<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript</title>
    <script>
        function displayDate(){
            document.getElementById("one").innerHTML=Date();
        }
        </script>
        <script>
            var txt="";
            function message(){
                try {
                    adddlert("Welcome guest!");
                }
                catch(err) {
                    txt="本页有一个错误。\n\n";
                    txt+="错误描述：" + err.message + "\n\n";
                    txt+="点击确定继续。\n\n";
                    alert(txt);
                }
            }
            </script>
            <script>
                function validateForm() {
                    var x = document.forms["myForm"]["fname"].value;
                    if (x == null || x == "") {
                        alert("需要输入名字。");
                        return false;
                    }
                }
             </script>
                          <script type="text/javascript">
                            function getValue(){
                               var a,b,c;
                               a = void ( b = 5, c = 7 );
                               document.write('a = ' + a + ' b = ' + b +' c = ' + c );
                            }
                            </script>

</head>
<body>
    <h1>我的第一个 JavaScript 程序</h1>
    <p id="one">这是一个段落</p>
<button type="button" onclick="displayDate()">显示日期</button>
<br>
<br>
<p>
    JavaScript 能够直接写入 HTML 输出流中：
    </p>
    <script>
    document.write("<h1>这是一个标题</h1>");
    document.write("<p>这是一个段落。</p>");
    </script>
    <p>
    您只能在 HTML 输出流中使用 <strong>document.write</strong>。
    如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
    </p>
    <br>
<br>
<p>
    JavaScript 能够对事件作出反应。比如对按钮的点击：
    </p>
    <button type="button" onclick="alert('欢迎!')">点我!</button>
    <br>
    <br>
    <h1>我的第一个 Web 页面</h1>
    <p>我的第一个段落。</p>
    <button onclick="myFunction99()">点我</button>
    <script>
    function myFunction99() 
    {
        document.write(Date());
    }
    </script>
<br>
<br>
<script>
    window.alert(5 + 6);
    </script>
    <br>
    <br>
    <h1>我的 Web 页面</h1>
    <p id="three">一个段落。</p>
    <div id="four">一个 DIV。</div>
    <script>
    document.getElementById("three").innerHTML="你好 Dolly";
    document.getElementById("four").innerHTML="你最近怎么样?";
    </script>
    <br>
    <br>
    <p>点击这里来创建变量，并显示结果。</p>
<button onclick="myFunction1()">点击这里</button>
<p id="five"></p>
<script>
function myFunction1(){
	var carname="Volvo";
	document.getElementById("five").innerHTML=carname;
}
</script>
<br>
<br>
<p>创建 JavaScript 对象。</p>
<p id="six"></p>
<script>
var person = {
    firstName : "John",
    lastName  : "Doe",
    age       : 50,
    eyeColor  : "blue"
};
document.getElementById("six").innerHTML =
	person.firstName + " 现在 " + person.age + " 岁。";
</script>
<br>
<br>
<p>请点击其中的一个按钮，来调用带参数的函数。</p>
<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
<button onclick="myFunction('Bob','Builder')">点击这里</button>
<script>
function myFunction(name,job)
{
	alert("Welcome " + name + ", the " + job);
}
</script>
<br>
<br>
<p>局部变量在声明的函数外不可以访问。</p>
<p id="seven"></p>
<script>
myFunction3();
document.getElementById("seven").innerHTML = "carName 的类型是：" +  typeof carName;
function myFunction3() 
{
    var carName = "Volvo";
}
</script>
<br>
<br>
<button onclick="this.innerHTML=Date()">现在的时间是?</button>
<br>
<br>
<script>
    var txt = "Hello World!";
    document.write("<p>" + txt.length + "</p>");
    var txt="ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    document.write("<p>" + txt.length + "</p>");
    </script>
    <br>
    <br>
    <p>点击按钮计算 x 的值.</p>
<button onclick="myFunction4()">点击这里</button>
<p id="eight"></p>
<script>
function myFunction4()
{
	y=5;
	z=2;
	x=y+z;
	document.getElementById("eight").innerHTML=x;
}
</script>
<br>
<br>
<p>如果时间早于 20:00，会获得问候 "Good day"。</p>
<button onclick="myFunction5()">点击这里</button>
<p id="nine"></p>
<script>
function myFunction5(){
	var x="";
	var time=new Date().getHours();
	if (time<20){
		x="Good day";
    }
	document.getElementById("nine").innerHTML=x;
}
</script>
<p>点击下面的按钮来显示今天是周几：</p>
<button onclick="myFunction6()">点击这里</button>
<p id="ten"></p>
<script>
function myFunction6(){
	var x;
	var d=new Date().getDay();
	switch (d){
  		case 0:x="今天是星期日";
    	break;
 		case 1:x="今天是星期一";
        break;
  		case 2:x="今天是星期二";
        break;
        case 3:x="今天是星期三";
   	 	break;
  		case 4:x="今天是星期四";
    	break;
  		case 5:x="今天是星期五";
        break;
  		case 6:x="今天是星期六";
    	break;
 	}
	document.getElementById("ten").innerHTML=x;
}
</script>
<br>
<br>
<p>点击下面的按钮，只要 i 小于 5 就一直循环代码块。</p>
<button onclick="myFunction7()">点击这里</button>
<p id="eleven"></p>
<script>
function myFunction7(){
	var x="",i=0;
	while (i<5){
		x=x + "该数字为 " + i + "<br>";
		i++;
	}
	document.getElementById("eleven").innerHTML=x;
}
</script>
<br>
<br>
<p>点击按钮，测试带有 break 语句的循环。</p>
<button onclick="myFunction8()">点击这里</button>
<p id="twelve"></p>
<script>
function myFunction8(){
	var x="",i=0;
	for (i=0;i<10;i++){
		if (i==3){
    			break;
			}
    	x=x + "该数字为 " + i + "<br>";
    }
	document.getElementById("twelve").innerHTML=x;
}
</script>
<br>
<br>
<p> typeof 操作符返回变量或表达式的类型。</p>
<p id="thirteen"></p>
<script>
document.getElementById("thirteen").innerHTML = 
	typeof "john" + "<br>" + 
	typeof 3.14 + "<br>" +
	typeof false + "<br>" +
	typeof [1,2,3,4] + "<br>" +
	typeof {name:'john', age:34};
</script>
<br>
<br>
<p>判断是否为数组。</p>
<p id="fourteen"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("fourteen").innerHTML = isArray(fruits);
function isArray(myArray) {
    return myArray.constructor.toString().indexOf("Array") > -1;
}
</script>
<br>
<br>
<p>搜索字符串 "runoob", 并显示匹配的起始位置：</p>
<button onclick="myFunction9()">点我</button>
<p id="fifteen"></p>
<script>
function myFunction9() {
    var str = "Visit Runoob!"; 
    var n = str.search(/Runoob/i);
    document.getElementById("fifteen").innerHTML = n;
}
</script>
<br>
<br>
<input type="button" value="查看消息" onclick="message()" />
​<br>
<form name="myForm" action="demo_form.php"
onsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>
<p>输入数字并点击验证按钮:</p>
​
<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction10()">验证</button>
​
<p>如果输入的数字小于 100 或大于300，会提示错误信息。</p>
​
<p id="sixteen"></p>
​
<script>
function myFunction10() {
    var inpObj = document.getElementById("id1");
    if (inpObj.checkValidity() == false) {
        document.getElementById("sixteen").innerHTML = inpObj.validationMessage;
    } else {
        document.getElementById("sixteen").innerHTML = "输入正确";
    }
}
</script>
<br>
<br>
<h2>JavaScript <b>this</b> 关键字</h2>

<p>实例中，<b>this</b> 指向了 <b>person</b> 对象。</p>
<p>因为 person 对象是 fullName 方法的所有者。</p>

<p id="seventeen"></p>

<script>
// 创建一个对象
var person = {
  firstName: "John",
  lastName : "Doe",
  id     : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

// 显示对象的数据
document.getElementById("seventeen").innerHTML = person.fullName();
</script>
<br>
<br>
<h2>为 JSON 字符串创建对象</h2>
<p id="eighteen"></p>
<script>
var text = '{ "sites" : [' +
    '{ "name":"Runoob" , "url":"www.runoob.com" },' +
    '{ "name":"Google" , "url":"www.google.com" },' +
    '{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
    
obj = JSON.parse(text);
document.getElementById("eighteen").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;
</script>
<br>
<br>
<p>点击以下链接查看结果：</p>
<a href="javascript:void(alert('Warning!!!'))">点我!</a>
<p>点击以下按钮查看结果：</p>
<form>
<input type="button" value="点我" onclick="getValue();" />
</form>
</body>
</html>